<template>
  <el-scrollbar height="100%">
    <avue-crud :data="data"
               v-model:page="page"
               :table-loading="tableLoading"
               :option="levelTableOption"
               v-model:search="search"
               @row-del="remove"
               @row-update="update"
               @size-change="sizeChange"
               @select="select"
               @current-change="pageChange"
               @search-change="searchChange"
               @refresh-change="refreshChange"
               @search-reset="resetChange">
      <template #menu-left="{ size }">
        <el-space>
          <level-add-form :size="size" @reflash-page="getPage"/>
          <level-batch-delete :size="size" :ids="selected"
                              @delete-change="finishChange"/>
        </el-space>
      </template>
      <template #status="scope">
        <el-tag v-if="scope.row.status ===0" type="primary">正常</el-tag>
        <el-tag v-else-if="scope.row.status ===1" type="danger">封禁</el-tag>
      </template>
    </avue-crud>
  </el-scrollbar>
</template>

<script setup>
import {ref, onMounted} from "vue";
import {levelTableOption} from "@/views/system/level/js/levelOptions.js";
import levelAddForm from "@/views/system/level/components/levelAddForm.vue";
import {levelPage, levelDelete, levelModify} from "@/views/system/level/js/levelRequest.js";
import {ElMessage, ElMessageBox} from "element-plus";
import levelBatchDelete from "@/views/system/level/components/levelBatchDelete.vue";
import Func from "@/utils/Utils.js";

onMounted(() => {
  getPage()
})

const tableLoading = ref(true)
const selected = ref('')
const data = ref([]);
const page = ref({
  total: 0,
  currentPage: 1,
  pageSize: 10
})
const search = ref({})

const select = (selection) => {
  if (selection.length === 0) {
    selected.value = ''
    return
  }
  let tempStr = ''
  selection.forEach(item => {
    tempStr = tempStr + item.id + ','
  })
  selected.value = tempStr.substring(0, tempStr.length - 1)
}

const remove = (form, index, done) => {
  ElMessageBox.confirm('是否删除, 是否继续?', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    levelDelete(form.id).then(res => {
      if (res.success) {
        ElMessage.success('删除成功!');
        getPage(page.value.currentPage, page.value.pageSize)
      }
    }).finally(() => {
      done();
    })
  }).catch(() => {
  });
}

const getPage = (newPage = page.value.currentPage, newSize = page.value.pageSize, newSearch = search.value) => {
  let clearObject = Func.clearObject(newSearch);
  levelPage({
    pageNum: newPage,
    pageSize: newSize,
    ...clearObject
  }).then(res => {
    if (res.success) {
      page.value.total = res.data.totalRow
      data.value = res.data.records
    }
  }).finally(() => {
    tableLoading.value = false
  })
}

const sizeChange = (val) => {
  getPage(page.value.currentPage, val)
}

const pageChange = (val) => {
  getPage(val, page.value.pageSize)
}

const finishChange = () => {
  getPage()
}

const searchChange = (params, done) => {
  getPage()
  done()
}

const resetChange = () => {
  search.value = {}
}

const refreshChange = () => {
  getPage()
  ElMessage.success('刷新成功')
}

const update = (row, index, done, loading) => {
  levelModify(row).then(res => {
    if (res.success) {
      ElMessage.success("修改成功")
    }
  }).finally(() => {
    done()
    loading()
    getPage()
  })
}

</script>
